<!DOCTYPE html>
<html lang="en">
    
<head>
  <meta charset="UTF-8">
  <link rel="icon" href="/favicon.ico">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>

  <title>Vite App</title>
</head>

<body>
  <div id="app" class="demo"></div>

<script>
const app = Vue.createApp({
  data() {
    return { count: 4 ,number : 'h'}
	  
  }
})

const vm = app.mount('#app')

document.write(vm.$data.count) // => 4
document.write(vm.$data.number)
	document.write("<br>")
document.write(vm.count)       // => 4
document.write("<br>")
// 修改 vm.count 的值也会更新 $data.count
vm.count = 5
document.write(vm.$data.count) // => 5
document.write("<br>")
// 反之亦然
vm.$data.count = 6
document.write(vm.count) // => 6
vm.number = 'g'
	document.write(vm.$data.number)
  </script>
</body>

</html>
